<template>
  <div class="account-container">
    <el-container class="responsive-layout">
      <el-header class="responsive-header">
        <nav class="nav-menu">
          <div class="logo">
            <img src="../assets/wow-logo.png" alt="WoW Logo" />
          </div>
          <div class="nav-links">
            <router-link to="/" class="nav-link">Home</router-link>
            <el-button type="danger" @click="handleLogout">Logout</el-button>
          </div>
          <!-- 移动端菜单按钮 -->
          <div class="mobile-menu-btn hide-on-desktop" @click="toggleMobileMenu">
            <el-icon><Menu /></el-icon>
          </div>
        </nav>
        <!-- 移动端菜单 -->
        <div class="mobile-menu" :class="{ 'mobile-menu-open': mobileMenuOpen }">
          <router-link to="/" class="mobile-nav-link" @click="closeMobileMenu">Home</router-link>
          <el-button type="danger" class="mobile-logout-btn" @click="handleLogout">Logout</el-button>
        </div>
      </el-header>
      
      <el-main class="responsive-main">
        <div class="responsive-flex">
          <div class="responsive-col responsive-col-4">
            <el-card class="account-info">
              <template #header>
                <h3 class="responsive-heading">Account Information</h3>
              </template>
              <div class="info-item">
                <span class="label">Username:</span>
                <span class="value">{{ user?.username }}</span>
              </div>
              <div class="info-item">
                <span class="label">Email:</span>
                <span class="value">{{ user?.email }}</span>
              </div>
              <div class="info-item">
                <span class="label">Account Created:</span>
                <span class="value">{{ formatDate(user?.createdAt) }}</span>
              </div>
            </el-card>
          </div>
          
          <div class="responsive-col responsive-col-8">
            <el-card class="characters">
              <template #header>
                <div class="characters-header">
                  <h3 class="responsive-heading">Your Characters</h3>
                  <el-button type="primary" @click="showCreateCharacter = true">
                    Create New Character
                  </el-button>
                </div>
              </template>
              
              <el-table :data="characters" style="width: 100%" class="responsive-table">
                <el-table-column prop="name" label="Name" />
                <el-table-column prop="race" label="Race" />
                <el-table-column prop="class" label="Class" />
                <el-table-column prop="level" label="Level" />
                <el-table-column label="Actions">
                  <template #default="scope">
                    <el-button type="primary" size="small" @click="selectCharacter(scope.row)">
                      Select
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteCharacter(scope.row)">
                      Delete
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              
              <!-- 移动端角色列表 -->
              <div class="mobile-characters hide-on-desktop">
                <div v-for="character in characters" :key="character.name" class="mobile-character-card">
                  <div class="mobile-character-info">
                    <h4>{{ character.name }}</h4>
                    <p>{{ character.race }} {{ character.class }} - Level {{ character.level }}</p>
                  </div>
                  <div class="mobile-character-actions">
                    <el-button type="primary" size="small" @click="selectCharacter(character)">
                      Select
                    </el-button>
                    <el-button type="danger" size="small" @click="deleteCharacter(character)">
                      Delete
                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-main>
    </el-container>
    
    <!-- Create Character Dialog -->
    <el-dialog
      v-model="showCreateCharacter"
      title="Create New Character"
      width="90%"
      :fullscreen="isMobile"
      class="responsive-dialog"
    >
      <el-form :model="characterForm" :rules="characterRules" ref="characterFormRef" label-position="top">
        <el-form-item label="Character Name" prop="name">
          <el-input v-model="characterForm.name" />
        </el-form-item>
        
        <el-form-item label="Race" prop="race">
          <el-select v-model="characterForm.race" placeholder="Select race" class="responsive-select">
            <el-option label="Human" value="human" />
            <el-option label="Orc" value="orc" />
            <el-option label="Elf" value="elf" />
            <el-option label="Undead" value="undead" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="Class" prop="class">
          <el-select v-model="characterForm.class" placeholder="Select class" class="responsive-select">
            <el-option label="Warrior" value="warrior" />
            <el-option label="Mage" value="mage" />
            <el-option label="Rogue" value="rogue" />
            <el-option label="Priest" value="priest" />
          </el-select>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showCreateCharacter = false">Cancel</el-button>
          <el-button type="primary" @click="createCharacter">
            Create
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { ElMessage } from 'element-plus'
import { Menu } from '@element-plus/icons-vue'

const router = useRouter()
const authStore = useAuthStore()

const user = computed(() => authStore.user)
const characters = ref([])
const showCreateCharacter = ref(false)
const characterFormRef = ref()
const mobileMenuOpen = ref(false)
const isMobile = ref(window.innerWidth < 768)

const characterForm = ref({
  name: '',
  race: '',
  class: ''
})

const characterRules = {
  name: [
    { required: true, message: 'Please enter character name', trigger: 'blur' },
    { min: 2, max: 12, message: 'Length should be 2 to 12', trigger: 'blur' }
  ],
  race: [
    { required: true, message: 'Please select a race', trigger: 'change' }
  ],
  class: [
    { required: true, message: 'Please select a class', trigger: 'change' }
  ]
}

const formatDate = (date: string) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString()
}

const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

const closeMobileMenu = () => {
  mobileMenuOpen.value = false
}

const createCharacter = async () => {
  if (!characterFormRef.value) return
  
  await characterFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      try {
        // Here you would typically make an API call to create the character
        characters.value.push({
          ...characterForm.value,
          level: 1
        })
        showCreateCharacter.value = false
        ElMessage.success('Character created successfully!')
      } catch (error) {
        ElMessage.error('Failed to create character')
      }
    }
  })
}

const selectCharacter = (character: any) => {
  // Here you would typically make an API call to select the character
  ElMessage.success(`Selected character: ${character.name}`)
}

const deleteCharacter = (character: any) => {
  // Here you would typically make an API call to delete the character
  const index = characters.value.findIndex(c => c.name === character.name)
  if (index !== -1) {
    characters.value.splice(index, 1)
    ElMessage.success('Character deleted successfully!')
  }
}

// 监听窗口大小变化
const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.account-container {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--background-dark) 0%, var(--background-darker) 100%);
  color: var(--text-color);
}

.responsive-header {
  padding: 0;
  height: auto;
  width: 100%;
}

.nav-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
}

@media (min-width: 768px) {
  .nav-menu {
    padding: 1rem 2rem;
  }
}

.logo img {
  height: 30px;
}

@media (min-width: 768px) {
  .logo img {
    height: 40px;
  }
}

.nav-links {
  display: none;
}

@media (min-width: 768px) {
  .nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
}

.nav-link {
  color: var(--text-color);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.nav-link:hover {
  color: var(--primary-color);
}

.mobile-menu-btn {
  font-size: 1.5rem;
  cursor: pointer;
}

.mobile-menu {
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.8);
  padding: 1rem;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
}

.mobile-menu-open {
  transform: translateY(0);
}

.mobile-nav-link {
  color: var(--text-color);
  text-decoration: none;
  padding: 0.75rem 0;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-nav-link:last-child {
  border-bottom: none;
}

.mobile-logout-btn {
  margin-top: 1rem;
  width: 100%;
}

.responsive-main {
  padding: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .responsive-main {
    padding: 2rem;
  }
}

.el-card {
  background: var(--card-bg);
  border: none;
  color: var(--text-color);
  margin-bottom: 20px;
  height: 100%;
}

.el-card :deep(.el-card__header) {
  background: var(--card-header-bg);
  border-bottom: 1px solid var(--border-color);
}

.info-item {
  margin-bottom: 1rem;
}

.info-item .label {
  font-weight: bold;
  margin-right: 0.5rem;
}

.characters-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 480px) {
  .characters-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .characters-header .el-button {
    width: 100%;
  }
}

:deep(.el-table) {
  background: transparent;
  color: var(--text-color);
}

:deep(.el-table th),
:deep(.el-table tr) {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.el-table td),
:deep(.el-table th.is-leaf) {
  border-bottom: 1px solid var(--border-color);
}

.mobile-characters {
  display: none;
}

@media (max-width: 768px) {
  .mobile-characters {
    display: block;
  }
  
  .responsive-table {
    display: none;
  }
  
  .responsive-col {
    width: 100% !important;
  }
}

.mobile-character-card {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.mobile-character-info h4 {
  margin: 0 0 0.5rem 0;
}

.mobile-character-info p {
  margin: 0 0 1rem 0;
  color: rgba(255, 255, 255, 0.7);
}

.mobile-character-actions {
  display: flex;
  gap: 0.5rem;
}

:deep(.el-dialog) {
  background: var(--background-darker);
  color: var(--text-color);
}

:deep(.el-dialog__title) {
  color: var(--text-color);
}

:deep(.el-form-item__label) {
  color: var(--text-color);
}

:deep(.el-input__inner) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-color);
}

:deep(.el-select .el-input__inner) {
  background: rgba(255, 255, 255, 0.1);
}

.responsive-select {
  width: 100%;
}

@media (min-width: 768px) {
  .responsive-dialog {
    width: 500px !important;
  }
}
</style> 